<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="/dndTemplate.xhtml">


	
	<ui:define name="main">
		<h:form>
			<table border="1" width="100%">
				<tr>
					<td colspan="2">Name:<p:inputText
							value="#{gameBean.searchDeckName}" id="searchDeckName" />
						Description:<p:inputText value="#{myCardsBean.searchDeckDesc}"
							id="searchDeckDesc" /> <p:commandButton value="Search"
							action="#{gameBean.searchDeck()}" update="decks">
						</p:commandButton>
					</td>
				</tr>

				<tr>
					<td width="300" height="550" valign="top"><p:layout
							style="min-width:400px;min-height:200px;" id="layout">
							<p:layoutUnit position="west" size="300" style="height:490;"
								collapsible="true" header="Decks">
								<p:dataList value="#{gameBean.decks}" var="deck" id="decks"
									type="definition" paginator="true" rows="2">


									<p:commandButton icon="ui-icon-search" update="@form"
										title="View Detail" action="#{gameBean.selectDeck(deck)}" />
									<p:graphicImage value="#{deck.pictureURL}" width="40"
										height="50" />
					#{deck.name}
					

						</p:dataList>
							</p:layoutUnit>
							<p:layoutUnit position="center" style="text-align: center;">
								<p:carousel id="cardCarousel" value="#{gameBean.cards}"
									var="card" numVisible="1"
									rendered="#{gameBean.cards!=null and gameBean.cards.size()>0}">
									<f:facet name="header">  
           								 Cards  
    								</f:facet>
									<h:panelGrid columns="1"
										style="width:300;height:400;text-align: center;"
										cellpadding="5">
										<h:outputText value="#{card.name}" />
										<br />
										<p:graphicImage value="#{card.pictureURL}" width="160"
											height="200" />
										<br />
										<h:outputText value="#{card.description}" />

									</h:panelGrid>
								</p:carousel>




							</p:layoutUnit>
						</p:layout></td>
				</tr>
			</table>
		</h:form>
	</ui:define>

</ui:composition>

</html>
